<html lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="花云云盘" />
	<title>花云云盘</title>

	<link rel="stylesheet" href="./css/jq22.css"/>

	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
	<script src="/js/jquery.min.js"></script>
	<script src="/bootstrap/js/bootstrap.min.js"></script>

</head>
<style>
	.blur {
		filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

		-webkit-filter: blur(7px); /* Chrome, Opera */
		-moz-filter: blur(7px);
		-ms-filter: blur(7px);
		filter: blur(7px);


		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=7, MakeShadow=false); /* IE6~IE9 */
	}
	.little_title {
		font-family: '微软雅黑';
		font-size: 40px;
		color: white;
		bottom: 7%;
		position: absolute;
		margin-left:10%;
		text-shadow: rgba(128,128,128,0.5) 2px 2px;
	}
	.carousel-fade .carousel-inner .item{
		opacity:0.5;
		transition:opacity 2s;
		-webkit-transition:opacity 2s;
		-moz-transition:opacity 2s;
		-ms-transition:opacity 2s;
		-o-transition:opacity 2s;
	}
	.carousel-fade .carousel-inner .active{ opacity: 1;}
	.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right{left: 0;opacity: 0.5;}
	.carousel-fade .carousel-inner .next.left,
	.carousel-fade .carousel-inner .prev.right {opacity: 1;}

	a{
		cursor: pointer;
	}

</style>
<body onkeydown="enterlogin();">
<!-- begin -->
<!--<div id="topTitleMask"-->
<!--style="width: 100%;height:80px;background-color: rgba(128,128,128,0.8);-->
<!--position: absolute;"-->
<!--class="blur">-->
<!--</div>-->
<!--<div id="topTitle"-->
<!--style="width: 100%;height:80px;background-color: rgba(255,255,255,0.6);-->
<!--position: absolute;">-->
<!--</div>-->

<!--首页标签-->
<div style="position: absolute;margin-top: 5px;width: 100%">
	<img src="/images/pan-top.png" style="max-height: 120px;display: inline-block;margin-left: 20px">
	<span style="font-family: '微软雅黑';font-size: 20px;float: right;margin: 20px 30px 0px 0px;">
		<a style="color: red;" data-toggle="modal" data-target="#ruleModal">定制条例</a>
		<!--		<a style="color: white; padding-left: 25px;"  data-toggle="modal" data-target="#clientDlg">客户端下载</a>-->
		<a style="color: white; padding-left: 25px;" href="/" target="_blank">官方网站</a>
				<a style="color: white; padding-left: 25px;">问题反馈</a>
		<a style="color: white; padding-left: 25px;" data-toggle="modal" data-target="#donateDlg">捐助我们</a>
	</span>
</div>
<!--捐助我们提示框-->
<div class="modal fade" id="donateDlg" role="dialog">
	<div class="modal-dialog modal-lg" style="left: 0">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">捐助我们</h4>
			</div>
			<div class="modal-body" style="text-align: center;">
				<img src="/images/money.jpg" style="max-height: 350px;display: inline-block">
				<!--				<img src="/images/jfz_code.jpg" style="max-height: 350px;display: inline-block">-->
			</div>
		</div>
	</div>
</div>
<!--&lt;!&ndash;客户端下载提示框&ndash;&gt;-->
<!--<div class="modal fade" id="clientDlg" role="dialog">-->
<!--	<div class="modal-dialog modal-lg" style="width: fit-content;left: 0">-->
<!--		<div class="modal-content">-->
<!--			<div class="modal-header">-->
<!--				<button type="button" class="close" data-dismiss="modal">&times;</button>-->
<!--				<h4 class="modal-title">客户端下载</h4>-->
<!--			</div>-->
<!--			<div class="modal-body" style="text-align: center;">-->
<!--				<div><img src="images/QRcode.png" style=";width: 160px;height: 160px;" /></div>-->
<!--				<a href="/downloadApk?filename=pan_0.1.0.apk&downloadPath=share" style="font-size: 18px;">下载客户端的apk</a>-->
<!--			</div>-->
<!--		</div>-->
<!--	</div>-->
<!--</div>-->
<!--定制条例说明-->
<div class="modal fade" id="ruleModal" role="dialog">
	<div class="modal-dialog modal-lg" style="left: 0">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">花云云盘V3.0.1版本说明</h4>
			</div>
			<div class="modal-body" >
				1. 本版本为花云V3.0.1版本，云盘新增音乐播放和视频功能。<br/>
				2. 新增分享需要密码才能分享，外网分享的功能。<br/>
				3. 新增文件图标功能，截拦IE浏览器功能和用户名提示功能。<br/>
			</div>
		</div>
	</div>
</div>
<!--轮播图-->
<div id="formbackground" class="carousel slide carousel-fade" style="position:fixed; z-index:-1;width: 100%;height:100%;" data-ride="carousel" data-interval="4000">
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<img id="pic001" src="images/bg3.jpg" style="width: 100%;height: 100%;" alt="First slide">
			<p class="little_title">
				<span>遇见好时光</span><br>
				&nbsp;&nbsp;&nbsp;<span>花云云盘V3.0.1全功能定制版</span>
			</p>
		</div>
		<div class="item">
			<img id="pic002" src="images/bg2.jpg" style="width: 100%;height: 100%;" alt="Second slide">
			<p class="little_title">
				<span>在线播放 触手可及</span><br>
				&nbsp;&nbsp;&nbsp;<span>体验高清影线的畅快淋漓</span>
			</p>
		</div>
		<div class="item">
			<img id="pic003" src="images/bg1.jpg" style="width: 100%;height: 100%;" alt="Third slide">
			<p class="little_title">
				<span>全功能分享</span><br>
				&nbsp;&nbsp;&nbsp;<span>随时随地 随传随到</span>
			</p>
		</div>
		<div class="item">
			<img id="pic004" src="images/bg4.jpg" style="width: 100%;height: 100%;" alt="Fourth slide">
			<p class="little_title">
				<span>心有多大 梦有多大</span><br>
				&nbsp;&nbsp;&nbsp;<span>马上就到 无可阻挡</span>
			</p>
		</div>
	</div>
</div>
<!--登陆框-->
<div id="login" style="background-color: rgba(0,0,0,0);">
	<div class="wrapper">
		<div class="login" style="margin-top: 0px">
			<!--<div style="display: inline-block;width: 60%;height: 100%"></div>-->
			<form action="#" method="post" class="container offset1 loginform"
				  style="display: inline-block; float: right; margin: 95px 40px 0px 0px">
				<div id="owl-login">
					<div class="hand"></div>
					<div class="hand hand-r"></div>
					<div class="arms">
						<div class="arm"></div>
						<div class="arm arm-r"></div>
					</div>
				</div>
				<div class="pad">
					<!--<input type="hidden" name="_csrf" value="9IAtUxV2CatyxHiK2LxzOsT6wtBE6h8BpzOmk="/>-->
					<div class="control-group">
						<div class="controls">
							<label for="userName" class="glyphicon glyphicon-user"></label>
							<input id="userName" type="text" name="userName" placeholder="用户名" tabindex="1" autofocus="autofocus" class="form-control input-medium" />
						</div>
					</div>
					<div class="control-group" id="emailGroup" style="display: none;">
						<div class="controls">
							<label for="email" class="glyphicon glyphicon-envelope"></label>
							<input id="email" type="text" name="email" placeholder="邮箱地址" tabindex="1" autofocus="autofocus" class="form-control input-medium" />
						</div>
					</div>
					<div class="controls" id="captchaGroup" style="margin-bottom: 60px;display: none;">
						<label for="activeCode" class="glyphicon glyphicon-fire"></label>
						<input id="captcha" type="text" name="captcha" placeholder="验证码" tabindex="1" autofocus="autofocus" class="form-control input-medium" style="width: 55%;float:left"/>
						<button type="button" id="captchabtn" tabindex="1" class="btn btn-primary" style="float: right">获取验证码</button>
					</div>
					<div class="control-group" id="phoneGroup" style="display: none;">
						<div class="controls">
							<label for="phone" tabindex="1"  class="glyphicon glyphicon-phone"></label>
							<input id="phone" type="text" name="phone" placeholder="电话号码" tabindex="1" autofocus="autofocus" class="form-control input-medium" />
						</div>
					</div>
					<div class="control-group" id="passwordGroup">
						<div class="controls">
							<label for="password" class="glyphicon glyphicon-briefcase"></label>
							<input id="password" type="password" name="password" placeholder="密码" tabindex="2" class="form-control input-medium" />
						</div>
					</div>
					<div class="control-group" id="activeCodeGroup" style="display: none;">
						<div class="controls">
							<label for="activeCode" class="glyphicon glyphicon-eye-open"></label>
							<input id="activeCode" type="text" name="activeCode" placeholder="激活码" tabindex="1" autofocus="autofocus" class="form-control input-medium" />
						</div>
					</div>
				</div>
				<div class="form-actions">
					<a id="forget_pw" tabindex="5" class="btn pull-left btn-link text-muted">忘记密码?</a>
					<a id="doSignup" tabindex="6" class="btn btn-link text-muted">注册</a>
					<button type="button" id="doLogin" tabindex="4" class="btn btn-primary">登录</button>
				</div>
			</form>

		</div>
	</div>
	<script>

		$(function() {
			// 禁用登录按钮
			document.getElementById("doLogin").disabled=true;
			$('#login #password').focus(function() {
				$('#owl-login').addClass('password');
			}).blur(function() {
				$('#owl-login').removeClass('password');
			});
			$("#forget_pw").click(function (e) {
				$("#userName").attr('placeholder',"请输入用户名");
				$("#email").attr('placeholder',"请输入邮箱");
				$("#captcha").attr('placeholder',"请输入验证码");
				$("#password").attr('placeholder',"请输入密码");
				document.getElementById("doLogin").innerText="重置密码";
				document.getElementById("doSignup").innerText="取消";
				if($("#userName").val() != "" && $("#password").val() != ""&& $("#email").val() != ""&& $("#captcha").val() != ""){
					document.getElementById("doLogin").disabled=false;
				} else{
					document.getElementById("doLogin").disabled=true;
				}
				$("#captchaGroup").show();
				$("#emailGroup").show();
			});
			// 注册功能
			$("#doSignup").click(function (e) {
				if(document.getElementById("doSignup").innerText=="注册") {
					$("#userName").attr('placeholder',"请设置用户名");
					$("#password").attr('placeholder',"请设置密码");
					$("#email").attr('placeholder',"请设置邮箱");
					$("#phone").attr('placeholder',"请设置电话号码");
					document.getElementById("doLogin").innerText="注册";
					document.getElementById("doSignup").innerText="取消注册";
					if($("#userName").val() != "" && $("#password").val() != ""&& $("#email").val() != ""&& $("#phone").val() != ""){
						document.getElementById("doLogin").disabled=false;
					} else{
						document.getElementById("doLogin").disabled=true;
					}
					$("#activeCodeGroup").show();
					$("#emailGroup").show();
					$("#phoneGroup").show();
					$("#captchaGroup").hide();
				} else{
					$("#userName").attr('placeholder',"用户名/手机号码");
					$("#password").attr('placeholder',"密码");
					document.getElementById("doLogin").innerText="登录";
					document.getElementById("doSignup").innerText="注册";
					if($("#userName").val() != "" && $("#password").val() != ""){
						document.getElementById("doLogin").disabled=false;
					} else{
						document.getElementById("doLogin").disabled=true;
					}
					$("#activeCodeGroup").hide();
					$("#emailGroup").hide();
					$("#phoneGroup").hide();
					$("#captchaGroup").hide();
				}
			});

			$("#userName, #password").bind('input propertychange',function (e){
				if($("#userName").val() != "" && $("#password").val() != ""){
					document.getElementById("doLogin").disabled=false;
				} else{
					document.getElementById("doLogin").disabled=true;
				}
			});

			//发送验证码
			$("#captchabtn").click(function (e) {
				if ($("#email").val() ==""){
					alert("请输入邮箱！");
					return;
				}
				$.ajax({
					type: "GET",
					url: "api/v1/pan/user/sendEmail",
					data: {
						userName: $("#userName").val(),
						email: $("#email").val()
					},
					dataType: "json",
					success: function (data) {
						if (data.code == "200") {
							alert("发送成功！");
						} else {
							alert(data.msg);
						}
					}
				});
			});
			//简单登录操作
			$("#doLogin").click(function (e) {
				if(document.getElementById("doLogin").innerText=="登录") {
					$.ajax({
						type: "POST",
						url: "api/v1/pan/user/login",
						data: {
							"userName": $("#userName").val(),
							"password": $("#password").val()
						},
						dataType: "json",
						success: function (data) {
							if (data.code == "20001") {
								alert(data.msg);
							} else if (data.code == "200") {
								window.location.href = "/old";
							} else {
								alert(data.msg);
							}
						}
					});
				} else if (document.getElementById("doLogin").innerText=="注册"){
					if ($("#activeCode").val() == "") {
						alert("请填写激活码！");
						return;
					}
					$.ajax({
						type: "POST",
						contentType: "application/json;charset=UTF-8",
						url: "api/v1/pan/user/register",
						data: JSON.stringify({
							"userName": $("#userName").val(),
							"password": $("#password").val(),
							"email": $("#email").val(),
							"phone": $("#phone").val(),
							"regcode": $("#activeCode").val()
						}),
						dataType: "json",
						success: function (data) {
							if (data.code == "200") {
								alert("注册成功，请重新登录！");
								window.location.href = '/old';
							} else {
								alert(data.msg);
							}
						}
					});
				}else {
					if ($("#captcha").val() == "") {
						alert("请填写注册码！");
						return;
					}
					$.ajax({
						type: "PUT",
						contentType: "application/json;charset=UTF-8",
						url: "api/v1/pan/user/forget",
						data: JSON.stringify({
							"username": $("#userName").val(),
							"password": $("#password").val(),
							"email": $("#email").val(),
							"captcha": $("#captcha").val()
						}),
						dataType: "json",
						success: function (data) {
							if (data.code == "200") {
								alert("密码重置成功！");
								window.location.href = '/old';
							} else {
								alert(data.msg);
							}
						}
					});
				}
			});
		});

		//回车登录
		function enterlogin() {
			if (event.keyCode == 13) {
				event.returnValue = false;
				event.cancel = true;
				if ($("#userName").val() != "" && $("#password").val() != "") {
					$("#doLogin").click();
				}
			}
		}

	</script>
</div>


<!-- end -->
</body>
</html>